<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>短网址生成</title>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        div {
            width: 600px;
            margin: 10px auto;
        }

        #oriurl {
            width: 500px;
            height: 25px;
            line-height: 25px;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div>
    <h1>短网址生成</h1>

    <p>
        <input id="oriurl" type="text" name="oriurl">
    </p>

    <p id="showurl"></p>

    <p>
        <input id="btn" type="button" value="生成短网址">
    </p>
</div>
<script>
    $('#btn').on('click', function () {
        var val = $('#oriurl').val();
        if (val == '') {
            alert('请输入网址!');
            return;
        }
        $.post('api.php', {oriurl: val}, function (data) {
            $('#showurl').html(data);
        });
    });
</script>
</body>
</html>